<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">添加材料供应商</h4>
</div>
<style>
    #dvThead {
        background-color: #f0f0f0;
    }
    #dvThead .table {
        margin-bottom: 0;
    }
    #dvThead .table thead{
        background-color: #f0f0f0;
        text-align: center;
    }
    #dvThead .table thead th{
        text-align: center;
    }
    #dvTbody {
        max-height: 600px;
        overflow: auto;
    }
    #dvTbody .table tbody td{
        text-align: center;
    }
</style>
<form id="add-form" action="/xqc/products/material-ajax" method="post" onsubmit="return checkAddOutSkuForm()">
    <div class="modal-body">
        <div class="row">
            <div class='form-inline margin'>
                <div id="dvThead">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width: 45%">供应商名称</th>
                                <th style="width: 45%">供应商材料编号</th>
                                <th style="width: 10%">操作</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div id="dvTbody">
                    <table class="table table-hover" id="table-detail">
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div style="display: block; margin-top: 20px; text-align: center;">
                    <button type="button" class="btn btn-sm btn-info" id="add-table-detail"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add Supplier</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        {{ csrf_field() }}
        <input type="hidden" name="action" value="doAddMaterialSupplier">
        <input type="hidden" name="param[material_id]" value="{{ $id }}">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>

<template id="table-detail-tpl">
    <tr>
        <td style="width:45%"><select style="width:95%" name="param[__index__][supplier_id]" class="gird-sku-select" required></select></td>
        <td style="width:45%"><input style="width:95%" type="text" class="form-control" placeholder="供应商材料编号" name="param[__index__][supplier_material_no]" required></td>
        <td style="width:10%; vertical-align: middle;"><a class="btn btn-sm btn-danger table-detail-remove"><i class="fa fa-trash"></i> 删除</a></td>
    </tr>
</template>

<script language="JavaScript" type="text/javascript">

    function checkAddOutSkuForm(){
        if($(".gird-sku-select").length == 0){
            swal('请添加供应商', '', 'error');
            return false;
        }else{
            return true;
        }
    }

    $(function () {
        //添加
        $('#add-table-detail').click(function (event) {
            $('#table-detail tbody').append($('#table-detail-tpl').html().replace(/__index__/g, $('#table-detail tr').length));
            $('.gird-sku-select').select2({
                ajax: {
                    url: "/xqc/api-sys/material-supplier-list",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term,
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: $.map(data.data, function (d) {
                                return d;
                            }),
                            pagination: {
                                more: (params.page * 2) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                "allowClear":true,
                "placeholder":"输入供应商",
                "minimumInputLength":0,//最少输入多少个字符后开始查询
                escapeMarkup: function (markup) {
                    return markup;
                }
            });
        });

        //删除
        $('#table-detail').on('click', '.table-detail-remove', function(event) {
            $(event.target).closest('tr').remove();
        });

        //提交表单
        $("#add-form").ajaxForm(function (data) {
            if (typeof data === 'object') {
                if (data.status) {
                    $("#createModal").modal('hide');
                    $(".modal-backdrop").remove();
                    $('body').removeClass('modal-open');
                    toastr.success('提交成功 !');
                    $.pjax.reload('#pjax-container');
                } else {
                    swal(data.message, '', 'error');
                }
            }
        });
    });
</script>
